<template>
  <el-dialog :title="title" v-model="dialogVisible" :width="width">
    <slot :data="form"></slot>
    <span slot="footer" class="dialog-footer">
        <slot name="foot">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="confirm(form)">确 定</el-button>
        </slot>
    </span>
  </el-dialog>
</template>


<script>
export default {
  name: "formDialog",
  props: {
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '40%'
    }
  },
  data() {
    return {
      form: {},
      dialogVisible: false
    };
  },
  methods: {
    open(data) {
      this.dialogVisible = true;
      this.form = Object.assign({}, data);
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      })
    },
    close() {
      this.dialogVisible = false;
      this.reject("diag is cancel.");
    },
    confirm(data) {
      this.dialogVisible = false;
      if (data) {
        this.resolve(data);
      } else {
        this.resolve(this.form);
      }

    }
  }
}
</script>

<style scoped>

</style>
